<template>
	<view class="box-detail">
		<view class="item-index-top">
			<view class="item-top-text">用地方式</view>
		</view>
		<view class="box-detail-content ">
			<view class="box-detail-content-item">
				<view class="row-title">用地方式</view>
				<input class="uni-input form-input" v-model="sendDataList.SITE_TYPE_value" @click="showSinglePicker()" name="input" placeholder="请选择用地方式" disabled=""/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">容积率</view>
				<input class="uni-input form-input" v-model="sendDataList.SITE_RATIO" name="input" placeholder="请输入容积率"/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title"><text class="redss">*</text>用地面积</view>
				<input class="uni-input form-input" v-model="sendDataList.SITE_AREA" name="input" placeholder="请输入用地面积"/>
				<view class="content-danwei">亩</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">价格</view>
				<input class="uni-input form-input" v-model="sendDataList.SITE_PRICE" name="input" placeholder="请输入价格"/>
				<view class="content-danwei">元/亩</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">选址地址</view>
				<input class="uni-input form-input" v-model="sendDataList.SITE_ADDRESS" name="input" placeholder="请输入选址地址"/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">地块描述</view>
				<textarea class="uni-input form-input" v-model="sendDataList.SITE_DESCR" name="input" placeholder="请输入地块描述"/>
			</view>
			<!-- <view class="box-detail-content-item">
				<view class="row-title">地图坐标</view>
				<view class="row-content">查看</view>
			</view> -->
		</view>
		<view class="box-attach">
			<view class="box-attach-title">附件</view>
			<view class="box-attach-row">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<text class="box-attach-name" @click="uploadFiles()">点击上传</text>
			</view>
			<view class="box-attach-row"  v-for="item,index in fileListData" :key="index">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<view class="box-attach-name">{{ item.fileShowName||"无"}}</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker1" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm1" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	export default {
		components: {
		    mpvuePicker
		},
		data(){
			return{
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				showArray:[
					{
						label: '购买土地',
						value: 1
					},
					{
						label: '租赁土地',
						value: 2
					}
				],
				pickerValueDefault: [3],
				pickerValueArray:[],
				code:'',
				sendDataList:[],
				getFileList:[],
				fileListData:[],
				newFileList:[]
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			},
			changeListData:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				if(this.pageData){
					if(this.pageData.fileList['PPP_T_BUS_PROJ.XMDKFJ']&&this.pageData.fileList['PPP_T_BUS_PROJ.XMDKFJ'].fileList.length){
						this.fileListData=this.pageData.fileList['PPP_T_BUS_PROJ.XMDKFJ'].fileList
					}
					this.sendDataList={
						SITE_TYPE_value:this.pageData.yongdifangshi,//用地方式
						SITE_TYPE:this.pageData.model.SITE_TYPE,//用地方式code
						SITE_RATIO:this.pageData.model.SITE_RATIO,//容积率
						SITE_AREA:this.pageData.model.SITE_AREA,//用地面积
						SITE_PRICE:this.pageData.model.SITE_PRICE,//价格
						SITE_ADDRESS:this.pageData.model.SITE_ADDRESS,//选址地址
						SITE_DESCR:this.pageData.model.SITE_DESCR,//地块描述
					}//全部参数
				}	
			},
		},
		methods:{
			showSinglePicker() {
				let dataArry=[]
				this.pickerValueArray=[]
				this.$refs.mpvuePicker1.show()
				this.pickerValueArray=this.showArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				
			},
			onCancel(e) {
			    console.log(e)
			},
			onConfirm1(e) {
				if(this.sendDataList){
					this.sendDataList.SITE_TYPE_value=e.label
					this.sendDataList.SITE_TYPE=e.value[0]
				}
				console.log(this.sendDataList,"this.sendDataListthis.sendDataList")
			},
			uploadFiles(){
				this.$util.upload('_XMDKFJ','PPP_T_BUS_PROJ.XMDKFJ',(data)=>{
					if(data){
						this.newFileList=data
						this.fileListData.push({
							...data[0],fileShowName:data[0].name
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	.box-detail {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
	
		&.border {
			border-bottom: 1px solid #e8f0f2;
		}
	}
	
	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding: 20rpx 10rpx 0 10rpx;
		border-top: 1px solid #e8f0f2;
	
		.box-attach-title{
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
		}
		.box-attach-row {
			display: flex;
			justify-content: flex-start;
			// align-items: center;
			// padding: 0 18rpx;
			// height: 38rpx;
			margin: 10rpx 0;
			.box-attach-icon {
				width: 34rpx;
				height:40rpx;
				margin-right: 20rpx;
				// background-image: url(../../../../static/images/icon_enclosure.png);
				// box-sizing: 34rpx 40rpx;
				// background-repeat: no-repeat;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box-attach-name {
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-line;
				flex: 1;
				font-size: 26rpx;
				color: #0099cc;
			}
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.content-danwei{
		width: 200rpx;
		font-size: 26rpx;
		color: #414a5d;
		word-wrap: break-word;
		word-break: break-all;
		flex: 1;
		text-align: left;
	}
</style>
